<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">

      <!-- 活动下拉框 -->
      <el-select v-model="searchObj.activityId" placeholder="活动名称" filterable @change="findGroup">
        <el-option v-for="activity in activityList" :key="activity.activityId" :label="activity.activityName"
          :value="activity.activityId" />
      </el-select>

      <!-- 活动下的分组 -->
      <el-select v-model="searchObj.groupId" placeholder="分组名称" filterable @change="setAddTaskVisible">
        <el-option v-for="group in groupList" :key="group.groupId" :label="group.groupName" :value="group.groupId" />
      </el-select>

      <!-- 任务名称下拉框 ，非三级联动，因为懒-->
      <el-select v-model="searchObj.taskName" placeholder="任务名称" filterable @change="getList(0)">
        <el-option v-for="taskTemp in taskList" :key="taskTemp.taskName" :label="taskTemp.taskName"
          :value="taskTemp.taskName" />
      </el-select>

      <!-- 任务状态下拉框 -->
      <el-select v-model="searchObj.taskStatus" placeholder="任务状态" filterable @change="getList(0)">
        <el-option v-for="status in taskStatusList" :key="status.value" :label="status.label" :value="status.value" />
      </el-select>

      <el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="getList(1)">查询</el-button>
      <el-button type="default" @click="resetData">清空</el-button>
      <el-button :disabled="increaseTaskFlag" type="success" style="margin-left: 10px;" icon="el-icon-document-add"
        @click="openAddTask">新增任务
      </el-button>
    </el-form>
    <br>
    <!-- 主体表格部分开始 -->
    <el-table :data="list" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}" style="width: 100%;margin-bottom: 20px;" row-key="id"
      border default-expand-all fit highlight-current-row>

      <el-table-column prop="taskId" label="任务序号" />

      <el-table-column prop="randomId" label="任务编号" />

      <!-- <el-table-column prop="level" label="任务层级" /> -->

      <el-table-column prop="taskName" label="任务名称" />

      <el-table-column prop="taskDescription" label="任务描述" show-overflow-tooltip>
        <template slot-scope="scope">
          <p v-html="scope.row.taskDescription" />
        </template>
      </el-table-column>

      <el-table-column prop="sponsorName" label="发起人" />

      <el-table-column prop="executorName" label="执行人" />

      <el-table-column prop="groupName" label="分组名称" />

      <el-table-column prop="beginTime" label="计划开始时间" />

      <el-table-column prop="endTime" label="计划结束时间" />

      <el-table-column prop="taskStatus" label="任务状态">
        <template slot-scope="scope">
          <span v-if="scope.row.taskStatus === '进行中'" style="color:#409EFF">进行中</span>
          <span v-else-if="scope.row.taskStatus === '未完成'" style="color: #F56C6C">未完成</span>
          <span v-else-if="scope.row.taskStatus === '暂停中'" style="color: #E6A23C">暂停中</span>
          <span v-else-if="scope.row.taskStatus === '未开始'" style="color: #909399">未开始</span>
          <span v-else-if="scope.row.taskStatus === '已完成'" style="color: #606266">已完成</span>
          <span v-else-if="scope.row.taskStatus === '已过期'" style="color: #67C23A">已过期</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="380">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="openUpdateTask(scope.row)">
            修改
          </el-button>
          <el-button type="primary" icon="el-icon-document-add" @click="addChildTask(scope.row)">
            增加子任务
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="removeTaskById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹框部分 -->
    <!-- 增加或更新任务信息的弹框 -->
    <el-dialog :visible.sync="increaseOrUpdateTaskVisible" width="55%" title="分组信息">
      <el-form :model="taskInfo" label-width="150px">
        <el-form-item label="分组名称" style="width: 30%;">
          <el-input v-model="taskInfo.groupName" :disabled="true" />
        </el-form-item>

        <el-form-item label="父任务" style="width: 40%;">
          <el-input v-model="taskInfo.parentTaskName" :disabled="true" placeholder="无" />
        </el-form-item>

        <el-form-item label="发起人" style="width: 50%;">
          <el-input v-model="taskInfo.sponsorName" :disabled="true" />
        </el-form-item>

        <el-form-item label="执行人" style="width: 50%;">
          <el-input v-model="taskInfo.executorName" :disabled="true" />
        </el-form-item>

        <el-form-item label="执行人统一认证码">
          <el-select v-model="taskInfo.executorId" placeholder="请输入统一认证码" filterable @change="findMemberByVolunteerId">
            <el-option v-for="member in groupMemberList" :key="member.id" :label="member.stuId" :value="member.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="任务名称" style="width: 50%;">
          <el-input v-model="taskInfo.taskName" />
        </el-form-item>

        <el-form-item label="任务状态" style="width: 50%;">
          <el-select v-model="taskInfo.taskStatus" placeholder="任务状态" filterable>
            <el-option v-for="status in taskStatusList" :key="status.value" :label="status.label"
              :value="status.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="任务时间">
          <el-col :span="8">
            <el-date-picker v-model="taskInfo.beginTime" type="datetime" placeholder="开始时间"
              value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" style="width: 100%;" />
          </el-col>
          <el-col :span="1" class="center line"> —</el-col>
          <el-col :span="8">
            <el-date-picker v-model="taskInfo.endTime" type="datetime" placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" style="width: 100%;" />
          </el-col>
        </el-form-item>

        <!-- 课程简介，富文本编辑器形式-->
        <el-form-item label="任务描述">
          <tinymce v-model="taskInfo.taskDescription" style="width: 80%;" />
        </el-form-item>

        <!-- <el-form-item label="任务描述">
          <el-input v-model="taskInfo.taskDescription" clearable />
        </el-form-item> -->

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeOrUpdateTaskVisible">取 消</el-button>
        <el-button type="primary" @click="addTask">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination :current-page="page" :page-size="limit" :total="total" background layout="prev, pager, next"
      style="padding: 30px 0; text-align: center;" @current-change="getList" />

  </div>
</template>
<script>
  import task from '@/api/management/task'
  import group from '@/api/management/group'
  import volunteer from '@/api/management/volunteer'
  import Tinymce from '@/components/Tinymce'

  export default {
    // 声明富文本编辑器组件，day07
    components: {
      Tinymce
    },
    data() {
      return {
        page: 1,
        limit: 10,
        total: 0,
        parentTask: '', // 父级任务
        increaseTaskFlag: true, // 新增任务按钮是否可点击
        increaseOrUpdateTaskVisible: false, // 新增任务弹框是否可见
        list: [], // 任务列表
        activityList: [], // 活动列表
        groupList: [], // 活动下的分组列表
        groupMemberList: [], // 根据组id查到的成员信息,只包含stuId,username,volunteerId
        taskList: [], // 所有的任务信息，用于任务名称的下拉框显示
        searchObj: {
          activityId: '',
          groupId: '',
          taskName: '',
          taskStatus: ''
        }, // 保存搜索框中的查询条件
        taskInfo: {
          id: Number,
          taskName: String,
          pid: Number,
          parentTaskName: String,
          activityId: Number,
          activityName: String,
          groupId: Number,
          groupName: String,
          sponsorId: Number,
          sponsorName: String,
          executorId: Number,
          executorName: String,
          taskDescription: String,
          taskStatus: String,
          beginTime: String,
          endTime: String
        }, // 新增任务的信息
        taskStatusList: [{
            value: '未开始',
            label: '未开始'
          }, {
            value: '进行中',
            label: '进行中'
          }, {
            value: '已完成',
            label: '已完成'
          },
          {
            value: '已过期',
            label: '已过期'
          },
          {
            value: '暂停中',
            label: '暂停中'
          },
          {
            value: '未完成',
            label: '未完成'
          }
        ]
      }
    },
    created() {
      this.getList()
      // 获取每个活动，并带有活动下的分组信息，用于二级联动
      this.getActivityGroupInfo()
      // 获取所有的任务，用于任务名称的下拉框显示
      this.getTask()
    },
    methods: {
      //手动置空任何对象，未使用版
      inintTaskInfo1(taskTemp) {
        let keys = Object.keys(taskTemp)
        let values = Object.values(taskTemp)
        values.forEach((item, i) => {
          if (typeof item === 'string') {
            taskTemp[keys[i]] = ''
          } else if (typeof item === 'number') {
            taskTemp[keys[i]] = null
          }
        })
      },
      // 关闭弹框
      closeOrUpdateTaskVisible() {
        this.increaseOrUpdateTaskVisible = false
        this.getList()
      },
      // 手动置空任务信息
      inintTaskInfo(taskTemp) {
        Object.keys(taskTemp).forEach(item => {
          switch (item) {
            case 'pid':
              taskTemp[item] = null
              break
            case 'activityId':
              taskTemp[item] = null
              break
            case 'groupId':
              taskTemp[item] = null
              break
            case 'sponsorId':
              taskTemp[item] = null
              break
            case 'executorId':
              taskTemp[item] = null
              break
            default:
              taskTemp[item] = ''
          }
        })
      },
      // 增加子任务
      addChildTask(currentTask) {
        this.taskInfo.pid = currentTask.id
        this.taskInfo.parentTaskName = currentTask.taskName
        // 随便给个值，保证是新增而不是修改
        this.taskInfo.activityName = '无'
        this.taskInfo.activityId = currentTask.activityId
        this.taskInfo.groupId = currentTask.groupId
        this.taskInfo.groupName = currentTask.groupName
        this.taskInfo.sponsorId = currentTask.sponsorId
        this.taskInfo.sponsorName = currentTask.sponsorName
        // 根据组id查询组内成员
        group.getMemberByGroupId(this.taskInfo.groupId).then(response => {
          this.groupMemberList = response.data.groupMemberList
        })
        this.increaseOrUpdateTaskVisible = true
      },
      // 修改任务信息
      openUpdateTask(taskTemp) {
        task.getParentTaskName(taskTemp.id).then(response => {
          this.taskInfo = taskTemp
          // 根据id，查询子任务的上一级任务,如果是一级任务，则返回自身,此步是为了回显父任务名
          this.parentTask = response.data.ParentTask
          this.taskInfo.parentTaskName = this.parentTask.taskName
          this.taskInfo.activityName = ''
          this.increaseOrUpdateTaskVisible = true
          // 根据组id查询组内成员
          group.getMemberByGroupId(this.taskInfo.groupId).then(response => {
            this.groupMemberList = response.data.groupMemberList
          })
        })
      },
      // 保存新增的任务信息
      addTask() {
        if (this.taskInfo.activityName === '') {
          task.updateTaskInfo(this.taskInfo).then(() => {
            this.$message({
              type: 'success',
              message: '更新任务信息成功!'
            })
            // 显示弹框
            this.increaseOrUpdateTaskVisible = false
            // 刷新列表
            this.getList()
          })
        } else {
          task.addTask(this.taskInfo).then(() => {
            this.$message({
              type: 'success',
              message: '新增任务成功!'
            })
            // 显示弹框
            this.increaseOrUpdateTaskVisible = false
            // 刷新列表
            this.getTask()
            this.getList()
          })
        }
      },
      // 打开新增任务弹框
      openAddTask() {
        this.inintTaskInfo(this.taskInfo)
        // 获取下拉框中的value和label值
        let obj1 = {}
        let obj2 = {}
        obj1 = this.activityList.find(activity => activity.activityId === this.searchObj.activityId)
        obj2 = this.groupList.find(group => group.groupId === this.searchObj.groupId)
        this.taskInfo.pid = 0
        this.taskInfo.parentTaskName = ''
        this.taskInfo.activityId = obj1.activityId
        this.taskInfo.activityName = obj1.activityName
        this.taskInfo.groupId = obj2.groupId
        this.taskInfo.groupName = obj2.groupName
        this.taskInfo.sponsorName = '张三'
        this.taskInfo.sponsorId = '1'
        this.taskInfo.taskStatus = '未开始'
        // 根据组id查询组内成员
        group.getMemberByGroupId(this.taskInfo.groupId).then(response => {
          this.groupMemberList = response.data.groupMemberList
        })
        // 显示弹框
        this.increaseOrUpdateTaskVisible = true
      },
      // 根据成员id查询成员姓名
      findMemberByVolunteerId(id) {
        volunteer.getVolunteerById(id).then(response => {
          this.taskInfo.executorName = response.data.volunteer.username
        })
      },
      // 获取所有的任务，用于任务名称的下拉框显示
      getTask() {
        task.getAllTask().then(response => {
          this.taskList = response.data.taskNameList
        })
      },
      // 当活动和分组下拉框有信息时,让新增任务按钮可见
      setAddTaskVisible() {
        this.increaseTaskFlag = false
        this.getList()
      },
      // 查询每个活动下的分组信息,value会代表活动id
      findGroup(value) {
        // 清空缓存
        this.searchObj.groupId = ''
        for (var i = 0; i < this.activityList.length; i++) {
          let activity = this.activityList[i]
          if (value === activity.activityId) {
            this.groupList = activity.groups
          }
        }
        // 将新增任务的按钮置为不可点击状态
        this.increaseTaskFlag = true
        this.getList()
      },
      // 查询每个活动，并封装活动下的分组信息
      getActivityGroupInfo() {
        group.getActivityGroupInfo().then(response => {
          this.activityList = response.data.groupQuery
        })
      },
      getList(page = 1) {
        this.page = page
        task.getTaskListPage(this.page, this.limit, this.searchObj)
          .then(response => {
            this.list = response.data.rows
            this.total = response.data.total
          })
        this.inintTaskInfo(this.taskInfo)
      },
      resetData() {
        // 清空查询条件
        this.searchObj = {}
        this.groupList = ''
        this.increaseTaskFlag = true
        this.getList()
      },
      // 根据id递归删除任务
      removeTaskById(id) {
        this.$confirm('此操作将删除该任务及其子任务, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          task.deleteTaskById(id).then(() => {
            // 提示删除成功
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 刷新列表
            this.getTask()
            this.getList()
          })
        }).catch(() => {})
      }
    }
  }
</script>
<style>
  /* /deep/.el-icon-arrow-right:before {
    content: "\e791";
  }

  /deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before {
    content: "\e790";
  }

  /deep/.el-table__expand-icon--expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  } */
</style>
